<template>
  <div>
    <el-row class="tac">
      <el-col :span="24">
        <el-menu class="el-menu-vertical-demo" router>
          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>

          <el-submenu
            v-for="(item, index) in menus"
            :key="item.id"
            :index="item.path"
          >
            <template slot="title">
              <div class="xzx">
                 <div v-if="index == '0'">
                <i class="el-icon-user"></i>
              </div>
              <div v-if="index == '1'">
                <i class="el-icon-folder"></i>
              </div>
              <div v-if="index == '2'">
                <i class="el-icon-shopping-bag-2"></i>
              </div>
              <div v-if="index == '3'">
                <i class="el-icon-s-order"></i>
              </div>
              <div v-if="index == '4'">
                <i class="el-icon-message"></i>
              </div>

                <span>{{ item.authName }}</span>
              </div>
              
            </template>
            <el-menu-item
              :index="item1.path"
              v-for="(item1, index1) in item.children"
              :key="index1"
              default-active=""
            >
            <div class="xzx">
             <div v-if="index == '0' && index1 == '0'">
                <i class="el-icon-folder-opened"> </i>
              </div>
              <div v-if="index == '1' && index1 == '0'">
                <i class="el-icon-setting"> </i>
              </div>
              <div v-if="index == '1' && index1 == '1'">
                <i class="el-icon-bangzhu"> </i>
              </div>
              <div v-if="index == '2' && index1 == '0'">
                <i class="el-icon-thumb"> </i>
              </div>
              <div v-if="index == '2' && index1 == '1'">
                <i class="el-icon-date"> </i>
              </div>
              <div v-if="index == '2' && index1 == '2'">
                <i class="el-icon-c-scale-to-original"> </i>
              </div>
              <div v-if="index == '3' && index1 == '0'">
                <i class="el-icon-folder-add"> </i>
              </div>
              <div v-if="index == '4' && index1 == '0'">
                <i class="el-icon-position"> </i>
              </div>

               <el-menu-item>{{ item1.authName }}</el-menu-item>
            </div>
             
            </el-menu-item>
            <!-- <el-menu-item index="1-2">选项2</el-menu-item> -->
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let userModule = createNamespacedHelpers("user");
let { mapState: userState, mapActions: userActions } = userModule;

export default {
  name: "",
  props: {},
  data() {
    return {};
  },
  components: {},
  methods: {
    ...userActions(["getmenus"]),

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted() {
    this.getmenus();
  },
  computed: {
    ...userState(["menus"])
  },
  watch: {}
};
</script>

<style lang='scss' scoped>
.el-icon-s-home {
  font-size: 20px;
}
.el-menu-item {
  padding: 8px 43px;
}
.xzx {
  display: flex;
}
</style>